import 'package:flutter/material.dart';
import 'dart:math' as math;

Widget _buildFittedBoxDemo() {
  return Card(
    elevation: 4,
    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
    child: Padding(
      padding: const EdgeInsets.all(20),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Text(
            'FittedBox组件演示',
            style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
          ),
          const SizedBox(height: 16),

          const Text(
            'FittedBox可以缩放并调整子组件的位置，使其适应可用空间',
            style: TextStyle(fontSize: 14),
          ),
          const SizedBox(height: 16),

          // 不同fit模式的演示
          Column(
            children: [
              // fill模式
              _buildFittedBoxExample('BoxFit.fill', '拉伸填满，可能变形', BoxFit.fill),

              const SizedBox(height: 16),

              // contain模式
              _buildFittedBoxExample(
                'BoxFit.contain',
                '保持比例，完整显示',
                BoxFit.contain,
              ),

              const SizedBox(height: 16),

              // cover模式
              _buildFittedBoxExample('BoxFit.cover', '保持比例，填满容器', BoxFit.cover),

              const SizedBox(height: 16),

              // scaleDown模式
              _buildFittedBoxExample(
                'BoxFit.scaleDown',
                '只缩小，不放大',
                BoxFit.scaleDown,
              ),
            ],
          ),

          const SizedBox(height: 20),

          // 实际应用示例
          const Text(
            '实际应用示例',
            style: TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
          ),
          const SizedBox(height: 12),

          Row(
            children: [
              // 文本自适应
              Expanded(
                child: Column(
                  children: [
                    Container(
                      width: double.infinity,
                      height: 80,
                      decoration: BoxDecoration(
                        color: Colors.blue[50],
                        border: Border.all(color: Colors.blue[200]!),
                        borderRadius: BorderRadius.circular(8),
                      ),
                      child: FittedBox(
                        fit: BoxFit.scaleDown,
                        child: Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Text(
                            '自适应文本大小\n超长文本会自动缩放',
                            style: TextStyle(
                              fontSize: 24,
                              color: Colors.blue[800],
                              fontWeight: FontWeight.bold,
                            ),
                            textAlign: TextAlign.center,
                          ),
                        ),
                      ),
                    ),
                    const SizedBox(height: 8),
                    const Text('文本自适应', style: TextStyle(fontSize: 12)),
                  ],
                ),
              ),

              const SizedBox(width: 16),

              // 图标自适应
              Expanded(
                child: Column(
                  children: [
                    Container(
                      width: double.infinity,
                      height: 80,
                      decoration: BoxDecoration(
                        color: Colors.green[50],
                        border: Border.all(color: Colors.green[200]!),
                        borderRadius: BorderRadius.circular(8),
                      ),
                      child: FittedBox(
                        fit: BoxFit.contain,
                        child: Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Icon(
                            Icons.star,
                            color: Colors.green[800],
                            size: 100,
                          ),
                        ),
                      ),
                    ),
                    const SizedBox(height: 8),
                    const Text('图标自适应', style: TextStyle(fontSize: 12)),
                  ],
                ),
              ),
            ],
          ),

          const SizedBox(height: 16),

          Container(
            padding: const EdgeInsets.all(12),
            decoration: BoxDecoration(
              color: Colors.purple[50],
              borderRadius: BorderRadius.circular(8),
              border: Border.all(color: Colors.purple[200]!),
            ),
            child: const Text(
              'FittedBox使用场景：\n'
              '• 响应式文本大小调整\n'
              '• 图标自适应容器大小\n'
              '• 组件在不同屏幕尺寸下的适配\n'
              '• 防止溢出的内容缩放',
              style: TextStyle(fontSize: 12),
            ),
          ),
        ],
      ),
    ),
  );
}

Widget _buildFittedBoxExample(String title, String description, BoxFit fit) {
  return Container(
    width: double.infinity,
    child: Row(
      children: [
        // 标题和描述
        Expanded(
          flex: 2,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                title,
                style: const TextStyle(
                  fontSize: 12,
                  fontWeight: FontWeight.bold,
                ),
              ),
              Text(
                description,
                style: TextStyle(fontSize: 10, color: Colors.grey[600]),
              ),
            ],
          ),
        ),

        const SizedBox(width: 16),

        // 演示容器
        Expanded(
          flex: 3,
          child: Container(
            height: 60,
            decoration: BoxDecoration(
              color: Colors.grey[100],
              border: Border.all(color: Colors.grey[300]!),
              borderRadius: BorderRadius.circular(8),
            ),
            child: FittedBox(
              fit: fit,
              child: Container(
                width: 100,
                height: 40,
                decoration: BoxDecoration(
                  color: Colors.orange,
                  borderRadius: BorderRadius.circular(4),
                ),
                child: const Center(
                  child: Text(
                    '示例',
                    style: TextStyle(color: Colors.white, fontSize: 16),
                  ),
                ),
              ),
            ),
          ),
        ),
      ],
    ),
  );
}

Widget _buildOriginalDecorations() {
  return Card(
    elevation: 4,
    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
    child: Padding(
      padding: const EdgeInsets.all(20),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          // 示例1：基本装饰盒 - 保留原有示例
          const DecoratedBox(
            decoration: BoxDecoration(
              color: Colors.blue, // 背景颜色
            ),
            child: Padding(
              padding: EdgeInsets.all(20),
              child: Text('登录', style: TextStyle(color: Colors.white)),
            ),
          ),

          const SizedBox(height: 30),

          // 示例2：带圆角和阴影的装饰盒 - 保留原有示例
          DecoratedBox(
            decoration: BoxDecoration(
              color: Colors.green,
              borderRadius: BorderRadius.circular(10), // 10像素圆角
            ),
            child: const Padding(
              padding: EdgeInsets.all(20),
              child: Text('注册', style: TextStyle(color: Colors.white)),
            ),
          ),

          const SizedBox(height: 30),

          // 示例3：带渐变色和阴影的按钮效果 - 保留原有示例
          DecoratedBox(
            decoration: BoxDecoration(
              gradient: const LinearGradient(
                colors: [Colors.red, Colors.orange], // 红到橙的渐变
              ),
              borderRadius: BorderRadius.circular(5), // 5像素圆角
              boxShadow: const [
                BoxShadow(
                  color: Colors.black54, // 阴影颜色
                  offset: Offset(2, 2), // 阴影偏移
                  blurRadius: 4, // 阴影模糊度
                ),
              ],
            ),
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 40, vertical: 15),
              child: Text(
                '修改密码',
                style: const TextStyle(
                  color: Colors.white,
                  fontSize: 16,
                  fontWeight: FontWeight.w500,
                ),
              ),
            ),
          ),

          const SizedBox(height: 30),

          // 示例4：圆形装饰盒 - 保留原有示例
          DecoratedBox(
            decoration: const BoxDecoration(
              color: Colors.purple,
              shape: BoxShape.circle, // 圆形而非矩形
            ),
            child: Padding(
              padding: const EdgeInsets.all(30),
              child: Text(
                '设置',
                style: const TextStyle(
                  color: Colors.white,
                  fontSize: 16,
                  fontWeight: FontWeight.w500,
                ),
              ),
            ),
          ),
        ],
      ),
    ),
  );
}

Widget _buildLayoutCharacteristics() {
  return Card(
    elevation: 4,
    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
    child: Padding(
      padding: const EdgeInsets.all(20),
      child: Column(
        children: [
          const Text(
            'Transform布局特性(不影响布局空间) - 保留原有示例',
            style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
          ),
          const SizedBox(height: 16),
          const Text('注意：变换只影响绘制阶段，不影响实际占位空间'),
          const SizedBox(height: 16),

          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(
                color: Colors.red,
                child: Transform.scale(
                  scale: 1.5,
                  child: const Text(
                    "Hello world",
                    style: TextStyle(fontSize: 16),
                  ),
                ),
              ),
              const Text(
                "你好",
                style: TextStyle(color: Colors.green, fontSize: 16),
              ),
            ],
          ),

          const SizedBox(height: 16),

          Container(
            padding: const EdgeInsets.all(12),
            decoration: BoxDecoration(
              color: Colors.amber[50],
              borderRadius: BorderRadius.circular(8),
              border: Border.all(color: Colors.amber[200]!),
            ),
            child: const Text(
              '可以看到"Hello world"被放大了1.5倍，但"你好"的位置没有受到影响，'
              '说明Transform不会改变组件的实际布局空间。',
              style: TextStyle(fontSize: 12),
              textAlign: TextAlign.center,
            ),
          ),
        ],
      ),
    ),
  );
}

Widget _buildRotatedBoxDemo() {
  return Card(
    elevation: 4,
    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
    child: Padding(
      padding: const EdgeInsets.all(20),
      child: Column(
        children: [
          const Text(
            'RotatedBox(影响布局空间) - 保留原有示例',
            style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
          ),
          const SizedBox(height: 16),
          const Text('注意：RotatedBox在布局阶段就进行变换，会影响实际占位'),
          const SizedBox(height: 16),

          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: const [
              DecoratedBox(
                decoration: BoxDecoration(color: Colors.red),
                child: RotatedBox(
                  quarterTurns: 1, // 旋转90度(1/4圈)
                  child: Text("Hello world", style: TextStyle(fontSize: 16)),
                ),
              ),
              Text("你好", style: TextStyle(color: Colors.green, fontSize: 16)),
            ],
          ),

          const SizedBox(height: 16),

          Container(
            padding: const EdgeInsets.all(12),
            decoration: BoxDecoration(
              color: Colors.blue[50],
              borderRadius: BorderRadius.circular(8),
              border: Border.all(color: Colors.blue[200]!),
            ),
            child: const Text(
              '可以看到"Hello world"旋转后，"你好"的位置发生了变化，'
              '说明RotatedBox会改变组件的实际布局空间。',
              style: TextStyle(fontSize: 12),
              textAlign: TextAlign.center,
            ),
          ),

          const SizedBox(height: 16),

          Container(
            padding: const EdgeInsets.all(12),
            decoration: BoxDecoration(
              color: Colors.purple[50],
              borderRadius: BorderRadius.circular(8),
              border: Border.all(color: Colors.purple[200]!),
            ),
            child: const Text(
              '思考：先平移再旋转和先旋转再平移效果不同，因为矩阵乘法不满足交换律。'
              '变换顺序会影响最终结果，后应用的变换会先执行。',
              style: TextStyle(fontSize: 12),
              textAlign: TextAlign.center,
            ),
          ),
        ],
      ),
    ),
  );
}

Widget _buildOriginalCustomClipDemo() {
  return Card(
    elevation: 4,
    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
    child: Padding(
      padding: const EdgeInsets.all(20),
      child: Column(
        children: [
          const Text(
            '自定义剪裁器 - 保留原有示例',
            style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
          ),
          const SizedBox(height: 16),

          // 自定义剪裁器 - 剪裁图片中间40x30区域 - 保留原有示例
          DecoratedBox(
            decoration: BoxDecoration(
              color: Colors.red.withOpacity(0.3), // 半透明红色背景
            ),
            child: ClipRect(
              clipper: MyClipper(), // 使用自定义剪裁器
              child: Image.asset(
                "assets/imgs/avatar.png",
                width: 100,
                errorBuilder: (context, error, stackTrace) {
                  return Container(
                    width: 100,
                    height: 100,
                    decoration: BoxDecoration(
                      gradient: LinearGradient(
                        colors: [Colors.blue[200]!, Colors.green[200]!],
                      ),
                    ),
                    child: const Icon(
                      Icons.image,
                      size: 50,
                      color: Colors.white,
                    ),
                  );
                },
              ),
            ),
          ),
          const SizedBox(height: 10),
          const Text(
            'CustomClipper - 只显示中间40×30区域\n(红色区域为实际占用空间)',
            textAlign: TextAlign.center,
            style: TextStyle(fontSize: 12),
          ),
        ],
      ),
    ),
  );
}

void main() {
  runApp(const ContainerDemoApp());
}

class ContainerDemoApp extends StatelessWidget {
  const ContainerDemoApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter容器功能演示',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: const MainScreen(),
    );
  }
}

class MainScreen extends StatefulWidget {
  const MainScreen({super.key});

  @override
  State<MainScreen> createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> with TickerProviderStateMixin {
  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 3, vsync: this);
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter容器功能演示'),
        centerTitle: true,
        elevation: 2,
        flexibleSpace: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
              colors: [Colors.blue[600]!, Colors.blue[400]!],
            ),
          ),
        ),
        bottom: TabBar(
          controller: _tabController,
          indicatorColor: Colors.white,
          indicatorWeight: 3,
          tabs: const [
            Tab(icon: Icon(Icons.content_cut), text: '剪裁演示'),
            Tab(icon: Icon(Icons.transform), text: '变换演示'),
            Tab(icon: Icon(Icons.palette), text: '装饰适配'),
          ],
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: const [
          ClipDemoWidget(),
          TransformDemoWidget(),
          DecoratedBoxAndFittedBoxDemoWidget(),
        ],
      ),
    );
  }
}

// ==================== 剪裁演示组件 ====================
class ClipDemoWidget extends StatelessWidget {
  const ClipDemoWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      padding: const EdgeInsets.all(16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          _buildSectionTitle('基本剪裁组件'),
          _buildBasicClipDemo(),
          const SizedBox(height: 24),

          _buildSectionTitle('溢出内容剪裁'),
          _buildOverflowClipDemo(),
          const SizedBox(height: 24),

          _buildSectionTitle('自定义剪裁区域'),
          _buildOriginalCustomClipDemo(),
          const SizedBox(height: 24),

          _buildSectionTitle('更多自定义剪裁形状'),
          _buildCustomClipDemo(),
          const SizedBox(height: 24),

          _buildSectionTitle('复杂剪裁路径'),
          _buildComplexClipDemo(),
        ],
      ),
    );
  }

  Widget _buildSectionTitle(String title) {
    return Container(
      margin: const EdgeInsets.only(bottom: 16),
      child: Row(
        children: [
          Container(
            width: 4,
            height: 20,
            decoration: BoxDecoration(
              color: Colors.blue,
              borderRadius: BorderRadius.circular(2),
            ),
          ),
          const SizedBox(width: 8),
          Text(
            title,
            style: const TextStyle(
              fontSize: 18,
              fontWeight: FontWeight.bold,
              color: Colors.black87,
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildBasicClipDemo() {
    return Card(
      elevation: 4,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
      child: Padding(
        padding: const EdgeInsets.all(20),
        child: Column(
          children: [
            // 原始图片 - 保留原有示例
            _buildClipExample(
              child: Image.asset(
                "assets/imgs/avatar.png",
                width: 100,
                errorBuilder: (context, error, stackTrace) {
                  return Container(
                    width: 100,
                    height: 100,
                    decoration: BoxDecoration(
                      gradient: LinearGradient(
                        colors: [Colors.pink[200]!, Colors.purple[200]!],
                      ),
                    ),
                    child: const Icon(
                      Icons.image,
                      size: 50,
                      color: Colors.white,
                    ),
                  );
                },
              ),
              title: '原始图片',
              subtitle: '100×100',
            ),

            const SizedBox(height: 30),

            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                // ClipOval - 保留原有示例
                _buildClipExample(
                  child: ClipOval(
                    child: Image.asset(
                      "assets/imgs/avatar.png",
                      width: 80,
                      errorBuilder: (context, error, stackTrace) {
                        return Container(
                          width: 80,
                          height: 80,
                          decoration: BoxDecoration(
                            gradient: LinearGradient(
                              colors: [Colors.pink[200]!, Colors.purple[200]!],
                            ),
                          ),
                          child: const Icon(
                            Icons.image,
                            size: 40,
                            color: Colors.white,
                          ),
                        );
                      },
                    ),
                  ),
                  title: 'ClipOval',
                  subtitle: '圆形剪裁',
                ),

                // ClipRRect - 保留原有示例
                _buildClipExample(
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(20),
                    child: Image.asset(
                      "assets/imgs/avatar.png",
                      width: 80,
                      errorBuilder: (context, error, stackTrace) {
                        return Container(
                          width: 80,
                          height: 80,
                          decoration: BoxDecoration(
                            gradient: LinearGradient(
                              colors: [Colors.blue[200]!, Colors.green[200]!],
                            ),
                          ),
                          child: const Icon(
                            Icons.image,
                            size: 40,
                            color: Colors.white,
                          ),
                        );
                      },
                    ),
                  ),
                  title: 'ClipRRect',
                  subtitle: '圆角矩形(20px)',
                ),

                // ClipPath - 新增三角形示例
                _buildClipExample(
                  child: ClipPath(
                    clipper: TriangleClipper(),
                    child: Image.asset(
                      "assets/imgs/avatar.png",
                      width: 80,
                      errorBuilder: (context, error, stackTrace) {
                        return Container(
                          width: 80,
                          height: 80,
                          decoration: BoxDecoration(
                            gradient: LinearGradient(
                              colors: [Colors.orange[200]!, Colors.red[200]!],
                            ),
                          ),
                        );
                      },
                    ),
                  ),
                  title: 'ClipPath',
                  subtitle: '三角形',
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildOverflowClipDemo() {
    return Card(
      elevation: 4,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
      child: Padding(
        padding: const EdgeInsets.all(20),
        child: Column(
          children: [
            const Text(
              'ClipRect剪裁溢出内容',
              style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 16),

            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                // 未剪裁的溢出 - 保留原有示例
                Column(
                  children: [
                    Container(
                      width: 120,
                      height: 60,
                      color: Colors.grey[200],
                      child: Align(
                        alignment: Alignment.centerLeft,
                        widthFactor: 0.5, // 只显示一半宽度
                        child: Image.asset(
                          "assets/imgs/avatar.png",
                          width: 100,
                          errorBuilder: (context, error, stackTrace) {
                            return const FlutterLogo(size: 80);
                          },
                        ),
                      ),
                    ),
                    const SizedBox(height: 8),
                    const Text(
                      '未剪裁\n(溢出部分可见)',
                      textAlign: TextAlign.center,
                      style: TextStyle(color: Colors.red, fontSize: 12),
                    ),
                  ],
                ),

                // 已剪裁的内容 - 保留原有示例
                Column(
                  children: [
                    Container(
                      width: 120,
                      height: 60,
                      color: Colors.grey[200],
                      child: ClipRect(
                        child: Align(
                          alignment: Alignment.centerLeft,
                          widthFactor: 0.5, // 只显示一半宽度
                          child: Image.asset(
                            "assets/imgs/avatar.png",
                            width: 100,
                            errorBuilder: (context, error, stackTrace) {
                              return const FlutterLogo(size: 80);
                            },
                          ),
                        ),
                      ),
                    ),
                    const SizedBox(height: 8),
                    const Text(
                      '已剪裁\n(溢出部分不可见)',
                      textAlign: TextAlign.center,
                      style: TextStyle(color: Colors.green, fontSize: 12),
                    ),
                  ],
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildCustomClipDemo() {
    return Card(
      elevation: 4,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
      child: Padding(
        padding: const EdgeInsets.all(20),
        child: Wrap(
          alignment: WrapAlignment.spaceEvenly,
          spacing: 20,
          runSpacing: 20,
          children: [
            // 心形剪裁
            _buildClipExample(
              child: ClipPath(
                clipper: HeartClipper(),
                child: Container(
                  width: 80,
                  height: 80,
                  decoration: BoxDecoration(
                    gradient: LinearGradient(
                      colors: [Colors.pink[300]!, Colors.red[400]!],
                      begin: Alignment.topLeft,
                      end: Alignment.bottomRight,
                    ),
                  ),
                ),
              ),
              title: '心形',
              subtitle: 'Heart Shape',
            ),

            // 星形剪裁
            _buildClipExample(
              child: ClipPath(
                clipper: StarClipper(),
                child: Container(
                  width: 80,
                  height: 80,
                  decoration: BoxDecoration(
                    gradient: LinearGradient(
                      colors: [Colors.yellow[300]!, Colors.orange[400]!],
                      begin: Alignment.topLeft,
                      end: Alignment.bottomRight,
                    ),
                  ),
                ),
              ),
              title: '星形',
              subtitle: 'Star Shape',
            ),

            // 六边形剪裁
            _buildClipExample(
              child: ClipPath(
                clipper: HexagonClipper(),
                child: Container(
                  width: 80,
                  height: 80,
                  decoration: BoxDecoration(
                    gradient: LinearGradient(
                      colors: [Colors.blue[300]!, Colors.purple[400]!],
                      begin: Alignment.topLeft,
                      end: Alignment.bottomRight,
                    ),
                  ),
                ),
              ),
              title: '六边形',
              subtitle: 'Hexagon',
            ),

            // 波浪形剪裁
            _buildClipExample(
              child: ClipPath(
                clipper: WaveClipper(),
                child: Container(
                  width: 80,
                  height: 80,
                  decoration: BoxDecoration(
                    gradient: LinearGradient(
                      colors: [Colors.cyan[300]!, Colors.blue[400]!],
                      begin: Alignment.topLeft,
                      end: Alignment.bottomRight,
                    ),
                  ),
                ),
              ),
              title: '波浪形',
              subtitle: 'Wave Shape',
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildComplexClipDemo() {
    return Card(
      elevation: 4,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
      child: Padding(
        padding: const EdgeInsets.all(20),
        child: Column(
          children: [
            // 聊天气泡
            Row(
              children: [
                Expanded(
                  child: ClipPath(
                    clipper: ChatBubbleClipper(),
                    child: Container(
                      padding: const EdgeInsets.all(12),
                      decoration: BoxDecoration(
                        gradient: LinearGradient(
                          colors: [Colors.blue[100]!, Colors.blue[200]!],
                        ),
                      ),
                      child: const Text(
                        '这是一个聊天气泡效果！',
                        style: TextStyle(fontSize: 14),
                      ),
                    ),
                  ),
                ),
                const SizedBox(width: 20),
              ],
            ),

            const SizedBox(height: 16),

            // 票券形状
            ClipPath(
              clipper: TicketClipper(),
              child: Container(
                width: double.infinity,
                padding: const EdgeInsets.all(16),
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    colors: [Colors.purple[100]!, Colors.purple[200]!],
                  ),
                ),
                child: const Column(
                  children: [
                    Text(
                      '优惠券',
                      style: TextStyle(
                        fontSize: 18,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    SizedBox(height: 8),
                    Text('满100减20'),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildClipExample({
    required Widget child,
    required String title,
    required String subtitle,
  }) {
    return Column(
      children: [
        child,
        const SizedBox(height: 8),
        Text(
          title,
          style: const TextStyle(fontSize: 12, fontWeight: FontWeight.bold),
        ),
        Text(subtitle, style: TextStyle(fontSize: 10, color: Colors.grey[600])),
      ],
    );
  }
}

// ==================== 变换演示组件 ====================
class TransformDemoWidget extends StatefulWidget {
  const TransformDemoWidget({super.key});

  @override
  State<TransformDemoWidget> createState() => _TransformDemoWidgetState();
}

class _TransformDemoWidgetState extends State<TransformDemoWidget> {
  double _translateX = 0;
  double _translateY = 0;
  double _rotationAngle = 0;
  double _scaleValue = 1.0;

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      padding: const EdgeInsets.all(16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          _buildSectionTitle('基础变换类型'),
          _buildBasicTransforms(),
          const SizedBox(height: 24),

          _buildSectionTitle('Transform布局特性'),
          _buildLayoutCharacteristics(),
          const SizedBox(height: 24),

          _buildSectionTitle('RotatedBox vs Transform'),
          _buildRotatedBoxDemo(),
          const SizedBox(height: 24),

          _buildSectionTitle('交互式变换控制'),
          _buildInteractiveTransforms(),
          const SizedBox(height: 24),

          _buildSectionTitle('3D变换效果'),
          _build3DTransforms(),
          const SizedBox(height: 24),

          _buildSectionTitle('组合变换示例'),
          _buildCombinedTransforms(),
        ],
      ),
    );
  }

  Widget _buildSectionTitle(String title) {
    return Container(
      margin: const EdgeInsets.only(bottom: 16),
      child: Row(
        children: [
          Container(
            width: 4,
            height: 20,
            decoration: BoxDecoration(
              color: Colors.green,
              borderRadius: BorderRadius.circular(2),
            ),
          ),
          const SizedBox(width: 8),
          Text(
            title,
            style: const TextStyle(
              fontSize: 18,
              fontWeight: FontWeight.bold,
              color: Colors.black87,
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildBasicTransforms() {
    return Card(
      elevation: 4,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
      child: Padding(
        padding: const EdgeInsets.all(20),
        child: Column(
          children: [
            // 基础矩阵变换示例(倾斜) - 保留原有示例
            _buildTransformDemo(
              '基础矩阵变换(倾斜)',
              Container(
                color: Colors.black,
                child: Transform(
                  alignment: Alignment.topRight, // 相对于坐标系原点的对齐方式
                  transform: Matrix4.skewY(0.3), // 沿Y轴倾斜0.3弧度
                  child: Container(
                    padding: const EdgeInsets.all(8.0),
                    color: Colors.deepOrange,
                    child: const Text(
                      '倾斜',
                      style: TextStyle(color: Colors.white),
                    ),
                  ),
                ),
              ),
              'Matrix4.skewY(0.3)',
            ),

            const Divider(height: 32),

            // 平移变换 - 保留原有示例
            _buildTransformDemo(
              '平移变换 (Translate)',
              Container(
                color: Colors.red,
                child: Transform.translate(
                  offset: const Offset(-20.0, -5.0), // 默认原点为左上角，左移20像素，向上平移5像素
                  child: const Text("平移", style: TextStyle(fontSize: 16)),
                ),
              ),
              'offset: Offset(-20.0, -5.0)',
            ),

            const Divider(height: 32),

            // 旋转变换 - 保留原有示例
            _buildTransformDemo(
              '旋转变换 (Rotate)',
              Container(
                color: Colors.red,
                child: Transform.rotate(
                  angle: math.pi / 2, // 旋转90度 (pi/2弧度)
                  child: const Text("旋转", style: TextStyle(fontSize: 16)),
                ),
              ),
              'angle: π/2 (90度)',
            ),

            const Divider(height: 32),

            // 缩放变换 - 保留原有示例
            _buildTransformDemo(
              '缩放变换 (Scale)',
              Container(
                color: Colors.red,
                child: Transform.scale(
                  scale: 1.5, // 放大到1.5倍
                  child: const Text("缩放", style: TextStyle(fontSize: 16)),
                ),
              ),
              'scale: 1.5',
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildInteractiveTransforms() {
    return Card(
      elevation: 4,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
      child: Padding(
        padding: const EdgeInsets.all(20),
        child: Column(
          children: [
            Transform.translate(
              offset: Offset(_translateX, _translateY),
              child: Transform.rotate(
                angle: _rotationAngle,
                child: Transform.scale(
                  scale: _scaleValue,
                  child: _buildDemoBox('控制我', Colors.red),
                ),
              ),
            ),

            const SizedBox(height: 24),

            // 控制滑块
            _buildSlider('平移X', _translateX, -50, 50, (value) {
              setState(() => _translateX = value);
            }),

            _buildSlider('平移Y', _translateY, -50, 50, (value) {
              setState(() => _translateY = value);
            }),

            _buildSlider('旋转', _rotationAngle, 0, 2 * math.pi, (value) {
              setState(() => _rotationAngle = value);
            }),

            _buildSlider('缩放', _scaleValue, 0.5, 2.0, (value) {
              setState(() => _scaleValue = value);
            }),

            const SizedBox(height: 16),

            ElevatedButton(
              onPressed: () {
                setState(() {
                  _translateX = 0;
                  _translateY = 0;
                  _rotationAngle = 0;
                  _scaleValue = 1.0;
                });
              },
              child: const Text('重置'),
            ),
          ],
        ),
      ),
    );
  }

  Widget _build3DTransforms() {
    return Card(
      elevation: 4,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
      child: Padding(
        padding: const EdgeInsets.all(20),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            // X轴翻转
            Column(
              children: [
                Transform(
                  transform:
                      Matrix4.identity()
                        ..setEntry(3, 2, 0.001)
                        ..rotateX(math.pi / 6),
                  alignment: Alignment.center,
                  child: _buildDemoBox('X轴', Colors.red),
                ),
                const SizedBox(height: 8),
                const Text('X轴翻转'),
              ],
            ),

            // Y轴翻转
            Column(
              children: [
                Transform(
                  transform:
                      Matrix4.identity()
                        ..setEntry(3, 2, 0.001)
                        ..rotateY(math.pi / 6),
                  alignment: Alignment.center,
                  child: _buildDemoBox('Y轴', Colors.blue),
                ),
                const SizedBox(height: 8),
                const Text('Y轴翻转'),
              ],
            ),

            // Z轴翻转
            Column(
              children: [
                Transform(
                  transform:
                      Matrix4.identity()
                        ..setEntry(3, 2, 0.001)
                        ..rotateZ(math.pi / 6),
                  alignment: Alignment.center,
                  child: _buildDemoBox('Z轴', Colors.green),
                ),
                const SizedBox(height: 8),
                const Text('Z轴翻转'),
              ],
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildCombinedTransforms() {
    return Card(
      elevation: 4,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
      child: Padding(
        padding: const EdgeInsets.all(20),
        child: Column(
          children: [
            const Text(
              '变换顺序的重要性',
              style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 16),

            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                // 先平移再旋转
                Column(
                  children: [
                    Transform.rotate(
                      angle: math.pi / 4,
                      child: Transform.translate(
                        offset: const Offset(30, 0),
                        child: _buildDemoBox('1', Colors.blue),
                      ),
                    ),
                    const SizedBox(height: 8),
                    const Text('先平移\n再旋转', textAlign: TextAlign.center),
                  ],
                ),

                // 先旋转再平移
                Column(
                  children: [
                    Transform.translate(
                      offset: const Offset(30, 0),
                      child: Transform.rotate(
                        angle: math.pi / 4,
                        child: _buildDemoBox('2', Colors.red),
                      ),
                    ),
                    const SizedBox(height: 8),
                    const Text('先旋转\n再平移', textAlign: TextAlign.center),
                  ],
                ),
              ],
            ),

            const SizedBox(height: 16),

            Container(
              padding: const EdgeInsets.all(12),
              decoration: BoxDecoration(
                color: Colors.amber[50],
                borderRadius: BorderRadius.circular(8),
                border: Border.all(color: Colors.amber[200]!),
              ),
              child: const Text(
                '注意：矩阵变换不满足交换律，变换的顺序会影响最终结果。\n'
                'Transform嵌套时，外层变换后执行。',
                style: TextStyle(fontSize: 12),
                textAlign: TextAlign.center,
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildTransformDemo(String title, Widget child, String code) {
    return Column(
      children: [
        Text(
          title,
          style: const TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
        ),
        const SizedBox(height: 12),
        Container(
          height: 100,
          width: double.infinity,
          decoration: BoxDecoration(
            color: Colors.grey[100],
            borderRadius: BorderRadius.circular(8),
          ),
          child: Center(child: child),
        ),
        const SizedBox(height: 8),
        Text(
          code,
          style: TextStyle(
            fontSize: 12,
            color: Colors.grey[600],
            fontFamily: 'monospace',
          ),
        ),
      ],
    );
  }

  Widget _buildSlider(
    String label,
    double value,
    double min,
    double max,
    ValueChanged<double> onChanged,
  ) {
    return Column(
      children: [
        Text('$label: ${value.toStringAsFixed(2)}'),
        Slider(value: value, min: min, max: max, onChanged: onChanged),
      ],
    );
  }

  Widget _buildDemoBox(String text, Color color) {
    return Container(
      width: 60,
      height: 60,
      decoration: BoxDecoration(
        color: color,
        borderRadius: BorderRadius.circular(8),
        boxShadow: [
          BoxShadow(
            color: color.withOpacity(0.3),
            spreadRadius: 1,
            blurRadius: 4,
            offset: const Offset(0, 2),
          ),
        ],
      ),
      child: Center(
        child: Text(
          text,
          style: const TextStyle(
            color: Colors.white,
            fontWeight: FontWeight.bold,
            fontSize: 12,
          ),
        ),
      ),
    );
  }
}

// ==================== 装饰与适配演示组件 ====================
class DecoratedBoxAndFittedBoxDemoWidget extends StatelessWidget {
  const DecoratedBoxAndFittedBoxDemoWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      padding: const EdgeInsets.all(16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          _buildSectionTitle('基础装饰效果 - 原有示例'),
          _buildOriginalDecorations(),
          const SizedBox(height: 24),

          _buildSectionTitle('更多基础装饰效果'),
          _buildBasicDecorations(),
          const SizedBox(height: 24),

          _buildSectionTitle('渐变装饰效果'),
          _buildGradientDecorations(),
          const SizedBox(height: 24),

          _buildSectionTitle('阴影装饰效果'),
          _buildShadowDecorations(),
          const SizedBox(height: 24),

          _buildSectionTitle('边框装饰效果'),
          _buildBorderDecorations(),
          const SizedBox(height: 24),

          _buildSectionTitle('空间适配 (FittedBox)'),
          _buildFittedBoxDemo(),
          const SizedBox(height: 24),

          _buildSectionTitle('实际应用示例'),
          _buildPracticalExamples(),
        ],
      ),
    );
  }

  Widget _buildSectionTitle(String title) {
    return Container(
      margin: const EdgeInsets.only(bottom: 16),
      child: Row(
        children: [
          Container(
            width: 4,
            height: 20,
            decoration: BoxDecoration(
              color: Colors.purple,
              borderRadius: BorderRadius.circular(2),
            ),
          ),
          const SizedBox(width: 8),
          Text(
            title,
            style: const TextStyle(
              fontSize: 18,
              fontWeight: FontWeight.bold,
              color: Colors.black87,
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildBasicDecorations() {
    return Card(
      elevation: 4,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
      child: Padding(
        padding: const EdgeInsets.all(20),
        child: Wrap(
          spacing: 16,
          runSpacing: 16,
          children: [
            _buildDecorationExample(
              '纯色背景',
              DecoratedBox(
                decoration: const BoxDecoration(color: Colors.blue),
                child: _buildExampleContent('蓝色'),
              ),
            ),

            _buildDecorationExample(
              '圆角背景',
              DecoratedBox(
                decoration: BoxDecoration(
                  color: Colors.green,
                  borderRadius: BorderRadius.circular(12),
                ),
                child: _buildExampleContent('圆角'),
              ),
            ),

            _buildDecorationExample(
              '圆形背景',
              DecoratedBox(
                decoration: const BoxDecoration(
                  color: Colors.orange,
                  shape: BoxShape.circle,
                ),
                child: _buildExampleContent('圆形'),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildGradientDecorations() {
    return Card(
      elevation: 4,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
      child: Padding(
        padding: const EdgeInsets.all(20),
        child: Column(
          children: [
            Row(
              children: [
                Expanded(
                  child: _buildDecorationExample(
                    '线性渐变',
                    DecoratedBox(
                      decoration: BoxDecoration(
                        gradient: const LinearGradient(
                          colors: [Colors.purple, Colors.blue],
                          begin: Alignment.topLeft,
                          end: Alignment.bottomRight,
                        ),
                        borderRadius: BorderRadius.circular(8),
                      ),
                      child: _buildExampleContent('线性'),
                    ),
                  ),
                ),
                const SizedBox(width: 16),
                Expanded(
                  child: _buildDecorationExample(
                    '径向渐变',
                    DecoratedBox(
                      decoration: BoxDecoration(
                        gradient: const RadialGradient(
                          colors: [Colors.yellow, Colors.red],
                          center: Alignment.center,
                          radius: 0.8,
                        ),
                        borderRadius: BorderRadius.circular(8),
                      ),
                      child: _buildExampleContent('径向'),
                    ),
                  ),
                ),
              ],
            ),

            const SizedBox(height: 16),

            _buildDecorationExample(
              '扫描渐变',
              DecoratedBox(
                decoration: BoxDecoration(
                  gradient: const SweepGradient(
                    colors: [
                      Colors.red,
                      Colors.orange,
                      Colors.yellow,
                      Colors.green,
                      Colors.blue,
                      Colors.purple,
                      Colors.red,
                    ],
                    center: Alignment.center,
                  ),
                  borderRadius: BorderRadius.circular(8),
                ),
                child: _buildExampleContent('扫描'),
              ),
              fullWidth: true,
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildShadowDecorations() {
    return Card(
      elevation: 4,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
      child: Padding(
        padding: const EdgeInsets.all(20),
        child: Wrap(
          spacing: 16,
          runSpacing: 16,
          children: [
            _buildDecorationExample(
              '基础阴影',
              DecoratedBox(
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(8),
                  boxShadow: const [
                    BoxShadow(
                      color: Colors.black26,
                      offset: Offset(0, 2),
                      blurRadius: 4,
                    ),
                  ],
                ),
                child: _buildExampleContent('阴影'),
              ),
            ),

            _buildDecorationExample(
              '多重阴影',
              DecoratedBox(
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(8),
                  boxShadow: const [
                    BoxShadow(
                      color: Colors.blue,
                      offset: Offset(-3, -3),
                      blurRadius: 6,
                    ),
                    BoxShadow(
                      color: Colors.red,
                      offset: Offset(3, 3),
                      blurRadius: 6,
                    ),
                  ],
                ),
                child: _buildExampleContent('多重'),
              ),
            ),

            _buildDecorationExample(
              '内阴影效果',
              Container(
                decoration: BoxDecoration(
                  color: Colors.grey[300],
                  borderRadius: BorderRadius.circular(8),
                  boxShadow: const [
                    BoxShadow(
                      color: Colors.black12,
                      offset: Offset(2, 2),
                      blurRadius: 4,
                      spreadRadius: 1,
                    ),
                  ],
                ),
                child: Container(
                  margin: const EdgeInsets.all(4),
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(6),
                    // 模拟内阴影效果：使用渐变和边框
                    gradient: const LinearGradient(
                      begin: Alignment.topLeft,
                      end: Alignment.bottomRight,
                      colors: [
                        Color(0xFFF5F5F5),
                        Colors.white,
                        Colors.white,
                        Color(0xFFF0F0F0),
                      ],
                      stops: [0.0, 0.3, 0.7, 1.0],
                    ),
                  ),
                  child: _buildExampleContent('内阴影'),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildBorderDecorations() {
    return Card(
      elevation: 4,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
      child: Padding(
        padding: const EdgeInsets.all(20),
        child: Wrap(
          spacing: 16,
          runSpacing: 16,
          children: [
            _buildDecorationExample(
              '实线边框',
              DecoratedBox(
                decoration: BoxDecoration(
                  color: Colors.white,
                  border: Border.all(color: Colors.blue, width: 2),
                  borderRadius: BorderRadius.circular(8),
                ),
                child: _buildExampleContent('实线'),
              ),
            ),

            _buildDecorationExample(
              '渐变边框',
              Container(
                decoration: BoxDecoration(
                  gradient: const LinearGradient(
                    colors: [Colors.purple, Colors.blue],
                  ),
                  borderRadius: BorderRadius.circular(8),
                ),
                child: Container(
                  margin: const EdgeInsets.all(2),
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(6),
                  ),
                  child: _buildExampleContent('渐变'),
                ),
              ),
            ),

            _buildDecorationExample(
              '不同边框',
              DecoratedBox(
                decoration: const BoxDecoration(
                  color: Colors.white,
                  border: Border(
                    left: BorderSide(color: Colors.red, width: 4),
                    top: BorderSide(color: Colors.blue, width: 2),
                    right: BorderSide(color: Colors.green, width: 3),
                    bottom: BorderSide(color: Colors.orange, width: 5),
                  ),
                ),
                child: _buildExampleContent('多色'),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildPracticalExamples() {
    return Card(
      elevation: 4,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
      child: Padding(
        padding: const EdgeInsets.all(20),
        child: Column(
          children: [
            // 按钮样式
            Row(
              children: [
                Expanded(
                  child: DecoratedBox(
                    decoration: BoxDecoration(
                      gradient: const LinearGradient(
                        colors: [Colors.blue, Colors.blueAccent],
                        begin: Alignment.topCenter,
                        end: Alignment.bottomCenter,
                      ),
                      borderRadius: BorderRadius.circular(25),
                      boxShadow: const [
                        BoxShadow(
                          color: Colors.black26,
                          offset: Offset(0, 2),
                          blurRadius: 4,
                        ),
                      ],
                    ),
                    child: const Padding(
                      padding: EdgeInsets.symmetric(
                        vertical: 12,
                        horizontal: 24,
                      ),
                      child: Text(
                        '登录',
                        textAlign: TextAlign.center,
                        style: TextStyle(
                          color: Colors.white,
                          fontWeight: FontWeight.bold,
                          fontSize: 16,
                        ),
                      ),
                    ),
                  ),
                ),
                const SizedBox(width: 16),
                Expanded(
                  child: DecoratedBox(
                    decoration: BoxDecoration(
                      color: Colors.white,
                      border: Border.all(color: Colors.blue, width: 2),
                      borderRadius: BorderRadius.circular(25),
                    ),
                    child: const Padding(
                      padding: EdgeInsets.symmetric(
                        vertical: 12,
                        horizontal: 24,
                      ),
                      child: Text(
                        '注册',
                        textAlign: TextAlign.center,
                        style: TextStyle(
                          color: Colors.blue,
                          fontWeight: FontWeight.bold,
                          fontSize: 16,
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            ),

            const SizedBox(height: 20),

            // 卡片样式
            DecoratedBox(
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(16),
                boxShadow: const [
                  BoxShadow(
                    color: Colors.black12,
                    offset: Offset(0, 4),
                    blurRadius: 8,
                    spreadRadius: 0,
                  ),
                ],
              ),
              child: Padding(
                padding: const EdgeInsets.all(16),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Row(
                      children: [
                        DecoratedBox(
                          decoration: const BoxDecoration(
                            gradient: LinearGradient(
                              colors: [Colors.purple, Colors.blue],
                            ),
                            shape: BoxShape.circle,
                          ),
                          child: Container(
                            width: 40,
                            height: 40,
                            child: const Icon(
                              Icons.person,
                              color: Colors.white,
                            ),
                          ),
                        ),
                        const SizedBox(width: 12),
                        const Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              '用户名',
                              style: TextStyle(
                                fontWeight: FontWeight.bold,
                                fontSize: 16,
                              ),
                            ),
                            Text(
                              '在线',
                              style: TextStyle(
                                color: Colors.green,
                                fontSize: 12,
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                    const SizedBox(height: 12),
                    const Text(
                      '这是一个使用DecoratedBox创建的精美卡片示例，'
                      '包含了阴影、圆角和渐变等装饰效果。',
                      style: TextStyle(fontSize: 14, height: 1.4),
                    ),
                  ],
                ),
              ),
            ),

            const SizedBox(height: 20),

            // 标签样式
            Wrap(
              spacing: 8,
              runSpacing: 8,
              children: [
                _buildTag('Flutter', Colors.blue),
                _buildTag('Dart', Colors.green),
                _buildTag('Mobile', Colors.orange),
                _buildTag('UI/UX', Colors.purple),
              ],
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildTag(String text, Color color) {
    return DecoratedBox(
      decoration: BoxDecoration(
        color: color.withOpacity(0.1),
        border: Border.all(color: color.withOpacity(0.3)),
        borderRadius: BorderRadius.circular(16),
      ),
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
        child: Text(
          text,
          style: TextStyle(
            color: color,
            fontSize: 12,
            fontWeight: FontWeight.w500,
          ),
        ),
      ),
    );
  }

  Widget _buildDecorationExample(
    String title,
    Widget child, {
    bool fullWidth = false,
  }) {
    return Column(
      children: [
        Container(
          width: fullWidth ? double.infinity : 80,
          height: 80,
          child: child,
        ),
        const SizedBox(height: 8),
        Text(
          title,
          style: const TextStyle(fontSize: 12, fontWeight: FontWeight.bold),
          textAlign: TextAlign.center,
        ),
      ],
    );
  }

  Widget _buildExampleContent(String text) {
    return Container(
      width: 80,
      height: 80,
      child: Center(
        child: Text(
          text,
          style: const TextStyle(
            color: Colors.white,
            fontWeight: FontWeight.bold,
            fontSize: 12,
          ),
        ),
      ),
    );
  }
}

// ==================== 动画演示组件 ====================
class AnimatedContainerDemoWidget extends StatefulWidget {
  const AnimatedContainerDemoWidget({super.key});

  @override
  State<AnimatedContainerDemoWidget> createState() =>
      _AnimatedContainerDemoWidgetState();
}

class _AnimatedContainerDemoWidgetState
    extends State<AnimatedContainerDemoWidget>
    with TickerProviderStateMixin {
  bool _isExpanded = false;
  Color _containerColor = Colors.blue;
  double _containerWidth = 100;
  double _containerHeight = 100;
  BorderRadius _borderRadius = BorderRadius.circular(8);

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      padding: const EdgeInsets.all(16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          _buildSectionTitle('AnimatedContainer演示'),
          _buildAnimatedContainerDemo(),
          const SizedBox(height: 24),

          _buildSectionTitle('交互式动画容器'),
          _buildInteractiveDemo(),
          const SizedBox(height: 24),

          _buildSectionTitle('实际应用场景'),
          _buildPracticalAnimations(),
        ],
      ),
    );
  }

  Widget _buildSectionTitle(String title) {
    return Container(
      margin: const EdgeInsets.only(bottom: 16),
      child: Row(
        children: [
          Container(
            width: 4,
            height: 20,
            decoration: BoxDecoration(
              color: Colors.red,
              borderRadius: BorderRadius.circular(2),
            ),
          ),
          const SizedBox(width: 8),
          Text(
            title,
            style: const TextStyle(
              fontSize: 18,
              fontWeight: FontWeight.bold,
              color: Colors.black87,
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildAnimatedContainerDemo() {
    return Card(
      elevation: 4,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
      child: Padding(
        padding: const EdgeInsets.all(20),
        child: Column(
          children: [
            AnimatedContainer(
              duration: const Duration(seconds: 1),
              curve: Curves.easeInOut,
              width: _isExpanded ? 200 : 100,
              height: _isExpanded ? 200 : 100,
              decoration: BoxDecoration(
                color: _isExpanded ? Colors.red : Colors.blue,
                borderRadius:
                    _isExpanded
                        ? BorderRadius.circular(100)
                        : BorderRadius.circular(8),
                boxShadow: [
                  BoxShadow(
                    color: (_isExpanded ? Colors.red : Colors.blue).withOpacity(
                      0.3,
                    ),
                    spreadRadius: _isExpanded ? 8 : 2,
                    blurRadius: _isExpanded ? 16 : 4,
                    offset: const Offset(0, 4),
                  ),
                ],
              ),
              child: Center(
                child: Icon(
                  _isExpanded ? Icons.favorite : Icons.favorite_border,
                  color: Colors.white,
                  size: _isExpanded ? 60 : 30,
                ),
              ),
            ),

            const SizedBox(height: 24),

            ElevatedButton(
              onPressed: () {
                setState(() {
                  _isExpanded = !_isExpanded;
                });
              },
              child: Text(_isExpanded ? '收缩' : '展开'),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildInteractiveDemo() {
    return Card(
      elevation: 4,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
      child: Padding(
        padding: const EdgeInsets.all(20),
        child: Column(
          children: [
            AnimatedContainer(
              duration: const Duration(milliseconds: 500),
              width: _containerWidth,
              height: _containerHeight,
              decoration: BoxDecoration(
                color: _containerColor,
                borderRadius: _borderRadius,
                boxShadow: [
                  BoxShadow(
                    color: _containerColor.withOpacity(0.3),
                    spreadRadius: 2,
                    blurRadius: 8,
                    offset: const Offset(0, 4),
                  ),
                ],
              ),
              child: const Center(
                child: Icon(Icons.star, color: Colors.white, size: 30),
              ),
            ),

            const SizedBox(height: 24),

            // 控制按钮
            Wrap(
              spacing: 8,
              runSpacing: 8,
              children: [
                ElevatedButton(
                  onPressed: () {
                    setState(() {
                      _containerColor =
                          _containerColor == Colors.blue
                              ? Colors.red
                              : Colors.blue;
                    });
                  },
                  child: const Text('改变颜色'),
                ),

                ElevatedButton(
                  onPressed: () {
                    setState(() {
                      _containerWidth = _containerWidth == 100 ? 150 : 100;
                      _containerHeight = _containerHeight == 100 ? 150 : 100;
                    });
                  },
                  child: const Text('改变大小'),
                ),

                ElevatedButton(
                  onPressed: () {
                    setState(() {
                      _borderRadius =
                          _borderRadius == BorderRadius.circular(8)
                              ? BorderRadius.circular(50)
                              : BorderRadius.circular(8);
                    });
                  },
                  child: const Text('改变形状'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildPracticalAnimations() {
    return Card(
      elevation: 4,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
      child: Padding(
        padding: const EdgeInsets.all(20),
        child: Column(
          children: [
            // 加载动画
            _buildAnimationExample('加载动画', _LoadingAnimation()),

            const SizedBox(height: 24),

            // 进度条动画
            _buildAnimationExample('进度条动画', _ProgressAnimation()),

            const SizedBox(height: 24),

            // 悬浮按钮动画
            _buildAnimationExample('悬浮按钮动画', _FloatingButtonAnimation()),
          ],
        ),
      ),
    );
  }

  Widget _buildAnimationExample(String title, Widget child) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          title,
          style: const TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
        ),
        const SizedBox(height: 12),
        Container(
          width: double.infinity,
          height: 80,
          decoration: BoxDecoration(
            color: Colors.grey[100],
            borderRadius: BorderRadius.circular(8),
          ),
          child: Center(child: child),
        ),
      ],
    );
  }
}

// 加载动画组件
class _LoadingAnimation extends StatefulWidget {
  @override
  _LoadingAnimationState createState() => _LoadingAnimationState();
}

class _LoadingAnimationState extends State<_LoadingAnimation>
    with TickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 1),
      vsync: this,
    )..repeat(reverse: true);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _controller,
      builder: (context, child) {
        return Row(
          mainAxisSize: MainAxisSize.min,
          children: List.generate(3, (index) {
            return AnimatedContainer(
              duration: const Duration(milliseconds: 300),
              margin: const EdgeInsets.symmetric(horizontal: 4),
              width: 12,
              height: 12 + (_controller.value * 20 * (index + 1) / 3),
              decoration: BoxDecoration(
                color: Colors.blue,
                borderRadius: BorderRadius.circular(6),
              ),
            );
          }),
        );
      },
    );
  }
}

// 进度条动画组件
class _ProgressAnimation extends StatefulWidget {
  @override
  _ProgressAnimationState createState() => _ProgressAnimationState();
}

class _ProgressAnimationState extends State<_ProgressAnimation>
    with TickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 3),
      vsync: this,
    )..repeat();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 200,
      height: 20,
      decoration: BoxDecoration(
        color: Colors.grey[300],
        borderRadius: BorderRadius.circular(10),
      ),
      child: AnimatedBuilder(
        animation: _controller,
        builder: (context, child) {
          return Align(
            alignment: Alignment.centerLeft,
            child: AnimatedContainer(
              duration: const Duration(milliseconds: 100),
              width: 200 * _controller.value,
              height: 20,
              decoration: BoxDecoration(
                gradient: const LinearGradient(
                  colors: [Colors.blue, Colors.purple],
                ),
                borderRadius: BorderRadius.circular(10),
              ),
            ),
          );
        },
      ),
    );
  }
}

// 悬浮按钮动画组件
class _FloatingButtonAnimation extends StatefulWidget {
  @override
  _FloatingButtonAnimationState createState() =>
      _FloatingButtonAnimationState();
}

class _FloatingButtonAnimationState extends State<_FloatingButtonAnimation> {
  bool _isPressed = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTapDown: (_) => setState(() => _isPressed = true),
      onTapUp: (_) => setState(() => _isPressed = false),
      onTapCancel: () => setState(() => _isPressed = false),
      child: AnimatedContainer(
        duration: const Duration(milliseconds: 150),
        width: _isPressed ? 50 : 60,
        height: _isPressed ? 50 : 60,
        decoration: BoxDecoration(
          gradient: LinearGradient(
            colors:
                _isPressed
                    ? [Colors.orange[600]!, Colors.red[600]!]
                    : [Colors.orange, Colors.red],
          ),
          shape: BoxShape.circle,
          boxShadow: [
            BoxShadow(
              color: Colors.black26,
              offset: Offset(0, _isPressed ? 2 : 4),
              blurRadius: _isPressed ? 4 : 8,
            ),
          ],
        ),
        child: Icon(Icons.add, color: Colors.white, size: _isPressed ? 20 : 24),
      ),
    );
  }
}

// ==================== 自定义剪裁器类 ====================

// 三角形剪裁器
class TriangleClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    path.moveTo(size.width / 2, 0);
    path.lineTo(0, size.height);
    path.lineTo(size.width, size.height);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}

// ==================== 原有的自定义剪裁器类 ====================

// 自定义剪裁器 - 剪裁指定矩形区域 - 保留原有示例
class MyClipper extends CustomClipper<Rect> {
  @override
  Rect getClip(Size size) {
    // 从原图(100×100)中剪裁出位于(30,35)位置，大小为40×30的区域
    return Rect.fromLTWH(30.0, 35.0, 40.0, 30.0);
  }

  @override
  bool shouldReclip(CustomClipper<Rect> oldClipper) => false; // 剪裁区域不变，不需要重新剪裁
}

// 心形剪裁器
class HeartClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    final width = size.width;
    final height = size.height;

    path.moveTo(width / 2, height * 0.3);
    path.cubicTo(
      width / 2,
      height * 0.1,
      width * 0.1,
      height * 0.1,
      width * 0.1,
      height * 0.3,
    );
    path.cubicTo(
      width * 0.1,
      height * 0.5,
      width / 2,
      height * 0.7,
      width / 2,
      height,
    );
    path.cubicTo(
      width / 2,
      height * 0.7,
      width * 0.9,
      height * 0.5,
      width * 0.9,
      height * 0.3,
    );
    path.cubicTo(
      width * 0.9,
      height * 0.1,
      width / 2,
      height * 0.1,
      width / 2,
      height * 0.3,
    );
    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}

// 星形剪裁器
class StarClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    final centerX = size.width / 2;
    final centerY = size.height / 2;
    final outerRadius = math.min(centerX, centerY);
    final innerRadius = outerRadius * 0.4;

    for (int i = 0; i < 10; i++) {
      final angle = (i * math.pi) / 5;
      final radius = i.isEven ? outerRadius : innerRadius;
      final x = centerX + radius * math.cos(angle - math.pi / 2);
      final y = centerY + radius * math.sin(angle - math.pi / 2);

      if (i == 0) {
        path.moveTo(x, y);
      } else {
        path.lineTo(x, y);
      }
    }
    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}

// 六边形剪裁器
class HexagonClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    final centerX = size.width / 2;
    final centerY = size.height / 2;
    final radius = math.min(centerX, centerY);

    for (int i = 0; i < 6; i++) {
      final angle = (i * math.pi) / 3;
      final x = centerX + radius * math.cos(angle);
      final y = centerY + radius * math.sin(angle);

      if (i == 0) {
        path.moveTo(x, y);
      } else {
        path.lineTo(x, y);
      }
    }
    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}

// 波浪形剪裁器
class WaveClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    final width = size.width;
    final height = size.height;

    path.moveTo(0, height * 0.5);

    for (double x = 0; x <= width; x += 10) {
      final y =
          height * 0.5 + math.sin((x / width) * 4 * math.pi) * height * 0.3;
      path.lineTo(x, y);
    }

    path.lineTo(width, height);
    path.lineTo(0, height);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}

// 聊天气泡剪裁器
class ChatBubbleClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    final width = size.width;
    final height = size.height;
    const radius = 16.0;
    const arrowHeight = 10.0;
    const arrowWidth = 15.0;

    path.moveTo(radius, 0);
    path.lineTo(width - radius, 0);
    path.arcToPoint(
      Offset(width, radius),
      radius: const Radius.circular(radius),
    );
    path.lineTo(width, height - radius - arrowHeight);
    path.arcToPoint(
      Offset(width - radius, height - arrowHeight),
      radius: const Radius.circular(radius),
    );
    path.lineTo(arrowWidth + radius, height - arrowHeight);
    path.lineTo(arrowWidth, height);
    path.lineTo(radius, height - arrowHeight);
    path.arcToPoint(
      Offset(0, height - radius - arrowHeight),
      radius: const Radius.circular(radius),
    );
    path.lineTo(0, radius);
    path.arcToPoint(Offset(radius, 0), radius: const Radius.circular(radius));
    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}

// 票券剪裁器
class TicketClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    final width = size.width;
    final height = size.height;
    const notchRadius = 12.0;
    const cornerRadius = 8.0;

    path.moveTo(cornerRadius, 0);
    path.lineTo(width - cornerRadius, 0);
    path.arcToPoint(
      Offset(width, cornerRadius),
      radius: const Radius.circular(cornerRadius),
    );
    path.lineTo(width, height / 2 - notchRadius);
    path.arcToPoint(
      Offset(width, height / 2 + notchRadius),
      radius: const Radius.circular(notchRadius),
      clockwise: false,
    );
    path.lineTo(width, height - cornerRadius);
    path.arcToPoint(
      Offset(width - cornerRadius, height),
      radius: const Radius.circular(cornerRadius),
    );
    path.lineTo(cornerRadius, height);
    path.arcToPoint(
      Offset(0, height - cornerRadius),
      radius: const Radius.circular(cornerRadius),
    );
    path.lineTo(0, height / 2 + notchRadius);
    path.arcToPoint(
      Offset(0, height / 2 - notchRadius),
      radius: const Radius.circular(notchRadius),
      clockwise: false,
    );
    path.lineTo(0, cornerRadius);
    path.arcToPoint(
      Offset(cornerRadius, 0),
      radius: const Radius.circular(cornerRadius),
    );
    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}
